<template>
  <div class="dashboard-container">
    <panel-head :route="route" />
    <!-- 用户信息区 -->
    <el-card class="user-card" v-if="userData.user && userData.user.user_name">
      <div class="user-info">
        <el-avatar :size="60" :src="userData.user.user_img" />
        <div class="user-details">
          <h3>{{ userData.user.user_name }}</h3>
          <p>最近登录IP地址：{{ userData.user.ip }}</p>
        </div>
      </div>
    </el-card>
    <el-card class="user-card" v-else>
      <div class="user-info">
        <el-avatar :size="60" :src="defaultAvatar" />
        <div class="user-details">
          <h3>加载中...</h3>
          <p>IP地址：加载中...</p>
          <p>最近登录：加载中...</p>
        </div>
      </div>
    </el-card>

    <!-- 订单状态统计 -->
    <div class="status-cards" v-if="userData.types.length">
      <el-card
        v-for="(item, index) in userData.types"
        :key="index"
        class="status-card"
        :style="{ borderLeft: `4px solid ${statusColors[index]}` }"
      >
        <div class="status-content">
          <h4>{{ item.state }}</h4>
          <p class="count">{{ item.num }}</p>
        </div>
      </el-card>
    </div>
    <el-card class="status-card" v-else>
      <div class="status-content">
        <h4>加载中...</h4>
        <p class="count">加载中...</p>
      </div>
    </el-card>

    <!-- 订单趋势图表 -->
    <el-card class="chart-card" v-if="userData.typeList.length">
      <div ref="chartEl" style="height: 400px"></div>
    </el-card>
    <el-card class="chart-card" v-else>
      <div class="status-content">
        <h4>加载中...</h4>
        <p class="count">加载中...</p>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import { useRoute } from "vue-router";
import * as echarts from "echarts";
import { ElCard, ElAvatar } from "element-plus";
import { report } from "../../api";

const route = useRoute();
const chartEl = ref(null);
const statusColors = ["#FFA940", "#36CFC9", "#73D13D", "#FF4D4F"];
const defaultAvatar = "https://via.placeholder.com/60"; // 默认头像

// 响应式数据
const userData = ref({
  user: {
    user_img: "",
    user_name: "加载中...",
    ip: "",
    last_login: "",
  },
  types: [],
  typeList: [],
});

// 初始化图表
let chartInstance = null;
const initChart = () => {
  if (!chartEl.value) return; // 确保 DOM 存在
  if (!chartInstance) {
    chartInstance = echarts.init(chartEl.value);
  }

  const option = {
    title: { text: "订单趋势分析" },
    tooltip: { trigger: "axis" },
    xAxis: {
      type: "category",
      data: userData.value.typeList.map((item) => item.date),
    },
    yAxis: [
      { type: "value", name: "订单数量" },
      { type: "value", name: "订单金额" },
    ],
    series: [
      {
        name: "订单数量",
        type: "line",
        data: userData.value.typeList.map((item) => item.order_sum),
      },
      {
        name: "订单金额",
        type: "bar",
        yAxisIndex: 1,
        data: userData.value.typeList.map((item) => item.order_money),
      },
    ],
  };
  chartInstance.setOption(option);
};

// 生命周期
onMounted(() => {
  report()
    .then(({ data }) => {
      if (data && data.user) {
        userData.value = {
          user: {
            user_img: data.user.user_img || defaultAvatar,
            user_name: data.user.user_name || "未知用户",
            ip: data.user.ip || "暂无数据",
            last_login: data.user.last_login || "暂无数据",
          },
          types: data.types || [],
          typeList: data.typeList || [],
        };
      }
      nextTick(() => {
        if (userData.value.typeList.length) {
          initChart(); // 确保有数据后再初始化图表
        }
      });
    })
    .catch((error) => {
      console.error("获取数据失败:", error);
    });
});

// 窗口 resize 监听
window.addEventListener("resize", () => {
  chartInstance?.resize();
});
</script>
<style lang="less" scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f5f7fa;

  .user-card {
    margin-bottom: 20px;

    .user-info {
      display: flex;
      align-items: center;
      gap: 20px;

      .user-details h3 {
        margin: 0 0 8px 0;
        font-size: 18px;
      }
    }
  }

  .status-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 20px;

    .status-card {
      transition: transform 0.3s;

      &:hover {
        transform: translateY(-5px);
      }

      .status-content {
        padding: 15px;

        .count {
          font-size: 24px;
          font-weight: bold;
          margin: 8px 0 0 0;
        }
      }
    }
  }

  .chart-card {
    margin-top: 20px;
  }
}
</style>
